<!doctype html>
<html>
  <head>
    <!-- (used for SSR) -->
    <!-- metadata:tags -->

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
    <link rel="icon" type="image/png" sizes="48x48" href="/favicon-48.png" />
    <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96.png" />
    <link rel="icon" type="image/png" sizes="144x144" href="/favicon-144.png" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180.png" />
    <link rel="preload" as="font" type="font/ttf" href="%app.font%" crossorigin="anonymous" />
    <link rel="preload" as="font" type="font/ttf" href="%app.monofont%" crossorigin="anonymous" />
    %sveltekit.head%
    <style>
      /* prevent FOUC */
      html {
        height: 100%;
        width: 100%;
      }

      body,
      html {
        margin: 0;
        padding: 0;
      }

      @keyframes delayedVisibility {
        to {
          visibility: visible;
        }
      }

      @keyframes loadspin {
        100% {
          transform: rotate(360deg);
        }
      }

      #stencil {
        --stencil-width: 150px;
        display: flex;
        width: var(--stencil-width);
        margin-left: auto;
        margin-right: auto;
        margin-top: calc(50vh - var(--stencil-width) / 2);
        margin-bottom: 100vh;
        place-items: center;
        justify-content: center;
        overflow: hidden;
        visibility: hidden;
        animation:
          0s linear 0.3s forwards delayedVisibility,
          loadspin 8s linear infinite;
      }

      .bg-immich-bg {
        background-color: white;
      }

      .dark .dark\:bg-immich-dark-bg {
        background-color: black;
      }
    </style>
    <script>
      /**
       * Prevent FOUC on page load.
       */
      const colorThemeKeyName = 'color-theme';

      let theme = localStorage.getItem(colorThemeKeyName);
      if (!theme) {
        theme = { value: 'light', system: true };
      } else if (theme === 'dark' || theme === 'light') {
        theme = { value: theme, system: false };
        localStorage.setItem(colorThemeKeyName, JSON.stringify(theme));
      } else {
        theme = JSON.parse(theme);
      }

      let themeValue = theme.value;
      if (theme.system) {
        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
          themeValue = 'dark';
        } else {
          themeValue = 'light';
        }
      }

      if (themeValue === 'light') {
        document.documentElement.classList.remove('dark');
      } else {
        document.documentElement.classList.add('dark');
      }
    </script>

    <link rel="stylesheet" href="/custom.css" />
  </head>

  <body class="bg-immich-bg dark:bg-immich-dark-bg">
    <div id="stencil">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 792 792">
        <style type="text/css">
          .st0 {
            fill: #fa2921;
          }
          .st1 {
            fill: #ed79b5;
          }
          .st2 {
            fill: #ffb400;
          }
          .st3 {
            fill: #1e83f7;
          }
          .st4 {
            fill: #18c249;
          }
        </style>
        <g>
          <path
            class="st0"
            d="M375.48,267.63c38.64,34.21,69.78,70.87,89.82,105.42c34.42-61.56,57.42-134.71,57.71-181.3
		c0-0.33,0-0.63,0-0.91c0-68.94-68.77-95.77-128.01-95.77s-128.01,26.83-128.01,95.77c0,0.94,0,2.2,0,3.72
		C300.01,209.24,339.15,235.47,375.48,267.63z"
          />
          <path
            class="st1"
            d="M164.7,455.63c24.15-26.87,61.2-55.99,103.01-80.61c44.48-26.18,88.97-44.47,128.02-52.84
		c-47.91-51.76-110.37-96.24-154.6-110.91c-0.31-0.1-0.6-0.19-0.86-0.28c-65.57-21.3-112.34,35.81-130.64,92.15
		c-18.3,56.34-14.04,130.04,51.53,151.34C162.05,454.77,163.25,455.16,164.7,455.63z"
          />
          <path
            class="st2"
            d="M681.07,302.19c-18.3-56.34-65.07-113.45-130.64-92.15c-0.9,0.29-2.1,0.68-3.54,1.15
		c-3.75,35.93-16.6,81.27-35.96,125.76c-20.59,47.32-45.84,88.27-72.51,118c69.18,13.72,145.86,12.98,190.26-1.14
		c0.31-0.1,0.6-0.2,0.86-0.28C695.11,432.22,699.37,358.52,681.07,302.19z"
          />
          <path
            class="st3"
            d="M336.54,510.71c-11.15-50.39-14.8-98.36-10.7-138.08c-64.03,29.57-125.63,75.23-153.26,112.76
		c-0.19,0.26-0.37,0.51-0.53,0.73c-40.52,55.78-0.66,117.91,47.27,152.72c47.92,34.82,119.33,53.54,159.86-2.24
		c0.56-0.76,1.3-1.78,2.19-3.01C363.28,602.32,347.02,558.08,336.54,510.71z"
          />
          <path
            class="st4"
            d="M617.57,482.52c-35.33,7.54-82.42,9.33-130.72,4.66c-51.37-4.96-98.11-16.32-134.63-32.5
		c8.33,70.03,32.73,142.73,59.88,180.6c0.19,0.26,0.37,0.51,0.53,0.73c40.52,55.78,111.93,37.06,159.86,2.24
		c47.92-34.82,87.79-96.95,47.27-152.72C619.2,484.77,618.46,483.75,617.57,482.52z"
          />
        </g>
      </svg>
    </div>
    <div>%sveltekit.body%</div>
  </body>
</html>
